<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增视频')"/>
    <th:block th:include="include :: select2-css"/>

    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body>
<div class="main-content">
    <form class="form-horizontal" id="form-shipin-add">
        <input id="treeId" name="categoryId" type="hidden"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>视频名称：</label>
                    <div class="col-sm-8">
                        <input class="form-control" maxlength="30" name="name" placeholder="请视频名称" required
                               type="text">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属视频分类：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input class="form-control" id="treeName" name="categoryName" onclick="selectDeptTree()"
                                   placeholder="请选择视频分类" required type="text">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <input name="logo" type="hidden" id="logo" value=""/>


            <input name="shiFileName" type="hidden" id="shiFileName" value=""/>
            <input name="duration" type="hidden" id="duration" value=""/>


            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>打赏：</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="startMoney" value="2" placeholder="2" required
                               type="text">
                    </div>
                    <label class="col-sm-1 control-label"><span style="color: red; ">元</span></label>
                    <div class="col-sm-3">
                        <input class="form-control" name="endMoney" value="5" placeholder="5" required
                               type="text">
                    </div>
                    <label class="col-sm-1 control-label"><span style="color: red; ">到</span></label>

                </div>
            </div>


        </div>

        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">上传图片</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-1" multiple type="file">
                        </div>

                    </div>


                    <div class="form-group">
                        <label class="font-noraml">上传图片</label>
                            <input class="form-control" name="url" type="text" id="url" value=""/>
                    </div>


                    <div class="form-group">
                        <label class="font-noraml">上传视频</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-2" multiple type="file">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">视频地址</label>

                            <input class="form-control" name="videoUrl" type="text" id="videoUrl" value=""/>

                    </div>

                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button class="btn btn-sm btn-primary" onclick="submitHandler()" type="button"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

<script>
    var prefix = ctx + "system/shipin";


    let fileinput = $("#fileinput-demo-1").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': ctx + "common/uploadFileName",
        allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png'],//接收的文件后缀
        overwriteInitial: false,
        initialPreviewAsData: true,
        initialPreview: [
            ""
        ]
    });

    $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
        if (data && data.response) {
            let response = data.response;
            if (response.code === 500) {
                $.modal.msg(response.msg);
            } else if (response.code === 0) {
                $('#logo').val(response.fileName);
                $('#url').val(response.url);
            }
        }
    });


    let fileinput1 = $("#fileinput-demo-2").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': ctx + "common/uploadFileName",
        overwriteInitial: false,
        initialPreviewAsData: true,
        allowedFileExtensions: ['avi', 'mp4'],//接收的文件后缀
        initialPreview: [
            ""
        ]
    });


    //这是视频
    $("#fileinput-demo-2").on("fileuploaded", function (event, data, previewId, index) {
        if (data && data.response) {
            let response = data.response;
            if (response.code === 500) {
                $.modal.msg(response.msg);
            } else if (response.code === 0) {
                $('#shiFileName').val(response.fileName);
                $('#videoUrl').val(response.url);
                $('#duration').val(response.duration);
            }
        }
    });


    $("#form-shipin-add").validate({
        onkeyup: false,
        rules: {},
        messages: {},
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {

            let url = $('#url').val();
            let videoUrl = $('#videoUrl').val();
            if (url == null || url === '') {
                $.modal.msg('请先上传视频logo图片');
                return;
            }
            if (videoUrl == null || videoUrl === '') {
                $.modal.msg('请先上传视频');
                return;
            }
            var data = $("#form-shipin-add").serializeArray();
            $.operate.saveTab(prefix + "/add", data);
        }
    }

    /*用户管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/category/selectDeptTree/" + deptId;
        var options = {
            title: '选择栏目',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }









</script>
</body>
</html>
